<template>
  <div class="page">
    <div class="status">
      <div class="status_ico">
        <image
          src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250318/ee647bfafcae05498e2fec766bdfd052.png"
          mode=""
        />
      </div>
      <div class="title">审核中</div>
    </div>

    <uni-forms ref="formRef" :modelValue="formData" :rules="rules">
      <view class="form-section">
        <view class="section-title">账户信息</view>
        <uni-forms-item label="账户名" name="accountName">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.accountName"
            placeholder="请输入支付账号的商户名称"
          />
        </uni-forms-item>
        <uni-forms-item label="负责人" name="manager">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.manager"
            placeholder="请输入负责人姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="身份证" name="idCard">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.idCard"
            placeholder="请输入负责人身份证"
          />
        </uni-forms-item>
        <uni-forms-item label="手机" name="phone">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.phone"
            placeholder="请输入负责人手机号"
          />
        </uni-forms-item>
        <uni-forms-item label="企业名称" name="companyName">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.companyName"
            placeholder="请输入企业名称"
          />
        </uni-forms-item>
        <uni-forms-item label="社会信用代码" name="creditCode">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.creditCode"
            placeholder="请输入社会信用代码"
          />
        </uni-forms-item>
        <uni-forms-item label="收款账户" name="bankAccount">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.bankAccount"
            placeholder="请输入收款账户"
          />
        </uni-forms-item>
        <uni-forms-item label="收款银行" name="bankName">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.bankName"
            placeholder="请选择收款银行"
          />
        </uni-forms-item>
        <uni-forms-item label="收款人名" name="accountHolder">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.accountHolder"
            placeholder="请输入收款人名"
          />
        </uni-forms-item>
        <uni-forms-item label="收款账号" name="accountNumber">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.accountNumber"
            placeholder="请输入收款账号"
          />
        </uni-forms-item>
        <uni-forms-item label="预留手机" name="reservedPhone">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.reservedPhone"
            placeholder="输入银行预留手机号"
          />
        </uni-forms-item>
      </view>

      <view class="form-section">
        <view class="section-title">经营信息</view>

        <uni-forms-item label="经营范围" name="businessScope">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.businessScope"
            placeholder="输入银行预留手机号"
          />
        </uni-forms-item>

        <!-- 证件上传 -->
        <view class="upload-section">
          <!-- 营业执照照片 -->
          <div class="upload_connter">
            <view class="upload-title">营业执照照片</view>
            <s-uploader
              v-model="formData.businessLicense"
              :limit="1"
			  :sizeType="['original']"
              file-mediatype="image"
              mode="grid"
              @success="(res) => handleUploadSuccess(res, 'businessLicense')"
              @fail="handleUploadFail"
              @delete="() => handleFileDelete('businessLicense')"
            >
              <view class="upload-box">
                <image
                  v-if="formData.businessLicense"
                  class="upload-preview"
                  :src="formData.businessLicense"
                  mode="widthFix"
                ></image>
                <image
                  v-else
                  class="upload-preview"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250317/07619582d8836fc2608aa7578730bfdf.png"
                  mode="widthFix"
                ></image>
                <view 
                  v-if="formData.businessLicense" 
                  class="delete-btn" 
                  @click="handleFileDelete('businessLicense')"
                >
                  <image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250318/5820919c5917ae5523d9df2505422b5e.png" />
                </view>
              </view>
            </s-uploader>
          </div>

          <!-- 身份证正面照 -->
          <div class="upload_connter">
            <view class="upload-title">负责人身份证正面照</view>
            <s-uploader
              v-model="formData.idCardFront"
              :limit="1"
			  :sizeType="['original']"
              file-mediatype="image"
              mode="grid"
              @success="(res) => handleUploadSuccess(res, 'idCardFront')"
              @fail="handleUploadFail"
              @delete="() => handleFileDelete('idCardFront')"
            >
              <view class="upload-box">
                <image
                  v-if="formData.idCardFront"
                  class="upload-preview"
                  :src="formData.idCardFront"
                  mode="widthFix"
                ></image>
                <image
                  v-else
                  class="upload-preview"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250317/5fdeb56a90db648bab0b9a0af9e9b5e4.png"
                  mode="widthFix"
                ></image>
              </view>
            </s-uploader>
          </div>

          <!-- 身份证反面照 -->
          <div class="upload_connter">
            <view class="upload-title">负责人身份证反面照</view>
            <s-uploader
              v-model="formData.idCardBack"
              :limit="1"
			  :sizeType="['original']"
              file-mediatype="image"
              mode="grid"
              @success="(res) => handleUploadSuccess(res, 'idCardBack')"
              @fail="handleUploadFail"
              @delete="() => handleFileDelete('idCardBack')"
            >
              <view class="upload-box">
                <image
                  v-if="formData.idCardBack"
                  class="upload-preview"
                  :src="formData.idCardBack"
                  mode="widthFix"
                ></image>
                <image
                  v-else
                  class="upload-preview"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250317/347a78667d728bf8dbb8381c026b2a44.png"
                  mode="widthFix"
                ></image>
              </view>
            </s-uploader>
          </div>

          <!-- 账户证明 -->
          <div class="upload_connter">
            <view class="upload-title">账户证明(银行卡正面或开户证明)</view>
            <s-uploader
              v-model="formData.bankProof"
              :limit="1"
			  :sizeType="['original']"
              file-mediatype="image"
              mode="grid"
              @success="(res) => handleUploadSuccess(res, 'bankProof')"
              @fail="handleUploadFail"
              @delete="() => handleFileDelete('bankProof')"
            >
              <view class="upload-box">
                <image
                  v-if="formData.bankProof"
                  class="upload-preview"
                  :src="formData.bankProof"
                  mode="widthFix"
                ></image>
                <image
                  v-else
                  class="upload-preview"
                  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250317/0acd4ad93d10136aca300189e2dc3c7f.png"
                  mode="widthFix"
                ></image>
              </view>
            </s-uploader>
          </div>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">开票信息</view>
        <uni-forms-item label="发票抬头" name="invoiceTitle">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.invoiceTitle"
            placeholder="请输入发票抬头"
          />
        </uni-forms-item>
        <uni-forms-item label="税号" name="taxNumber">
          <uni-easyinput
            :inputBorder="false"
            v-model="formData.taxNumber"
            placeholder="请输入税号"
          />
        </uni-forms-item>
      </view>

      <button class="submit-btn" @click="submitForm">提交认证</button>
    </uni-forms>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import sUploader from '@/sheep/components/s-uploader/s-uploader.vue';
import sheep from '@/sheep';
const formRef = ref(null);

const formData = reactive({
  accountName: '', // 账户名称
  manager: '', // 负责人姓名
  idCard: '', // 负责人身份证号
  phone: '', // 负责人手机号
  companyName: '', // 企业名称
  creditCode: '', // 统一社会信用代码
  bankAccount: '', // 收款账户
  bankName: '', // 收款银行名称
  accountHolder: '', // 收款人姓名
  accountNumber: '', // 收款账号
  reservedPhone: '', // 银行预留手机号
  businessScope: '', // 经营范围
  businessLicense: '', // 营业执照照片
  idCardFront: '', // 身份证正面照片
  idCardBack: '', // 身份证反面照片
  bankProof: '', // 银行开户证明
  invoiceTitle: '', // 发票抬头
  taxNumber: '', // 税号
});

const rules = {
  accountName: {
    rules: [{ required: true, errorMessage: '请输入账户名' }],
  },
  manager: {
    rules: [{ required: true, errorMessage: '请输入负责人姓名' }],
  },
  idCard: {
    rules: [
      { required: true, errorMessage: '请输入身份证号' },
      {
        pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dX]$/,
        errorMessage: '身份证号格式不正确',
      },
    ],
  },
  phone: {
    rules: [
      { required: true, errorMessage: '请输入手机号' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
  companyName: {
    rules: [{ required: true, errorMessage: '请输入企业名称' }],
  },
  creditCode: {
    rules: [{ required: true, errorMessage: '请输入社会信用代码' }],
  },
  bankAccount: {
    rules: [{ required: true, errorMessage: '请输入收款账户' }],
  },
  bankName: {
    rules: [{ required: true, errorMessage: '请选择收款银行' }],
  },
  accountHolder: {
    rules: [{ required: true, errorMessage: '请输入收款人名' }],
  },
  accountNumber: {
    rules: [{ required: true, errorMessage: '请输入收款账号' }],
  },
  reservedPhone: {
    rules: [
      { required: true, errorMessage: '请输入预留手机号' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
  businessScope: {
    rules: [{ required: true, errorMessage: '请输入经营范围' }],
  },
  businessLicense: {
    rules: [{ required: true, errorMessage: '请上传营业执照照片' }],
  },
  idCardFront: {
    rules: [{ required: true, errorMessage: '请上传身份证正面照' }],
  },
  idCardBack: {
    rules: [{ required: true, errorMessage: '请上传身份证反面照' }],
  },
  bankProof: {
    rules: [{ required: true, errorMessage: '请上传账户证明' }],
  },
  invoiceTitle: {
    rules: [{ required: true, errorMessage: '请输入发票抬头' }],
  },
  taxNumber: {
    rules: [{ required: true, errorMessage: '请输入税号' }],
  },
};

const submitForm = async () => {
		console.log(22);
    
    sheep.$router.go('/pages/merchant/pay_code',{
			
			type:0,//0自己入驻  1代理帮忙入驻
			shopType:2//0本地生活  1电商  2鲸喜
		})
  // console.log('表单数据：', formData);

  // try {
  //   const valid = await formRef.value.validate();
  //   if (valid) {
  //     // 提交表单逻辑
  //     console.log('表单数据：', formData);
  //   }
  // } catch (err) {
  //   console.error(err);
  // }
};

// 处理上传成功
const handleUploadSuccess = (res, type) => {
  console.log('上传成功返回数据：', res);

  const filePath = res.tempFilePaths?.[0];
  // 添加 OSS 前缀
  const fileUrl = `https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com${filePath}`;

  if (!fileUrl) {
    uni.showToast({
      title: '获取文件地址失败',
      icon: 'error',
    });
    return;
  }

  switch (type) {
    case 'businessLicense':
      formData.businessLicense = fileUrl;
      break;
    case 'idCardFront':
      formData.idCardFront = fileUrl;
      break;
    case 'idCardBack':
      formData.idCardBack = fileUrl;
      break;
    case 'bankProof':
      formData.bankProof = fileUrl;
      break;
  }

  console.log('更新后的表单数据：', formData);
};

// 处理上传失败
const handleUploadFail = (err) => {
  console.error('上传失败：', err);
  uni.showToast({
    title: '上传失败，请重试',
    icon: 'error',
    duration: 2000,
  });
};

// 处理文件删除
const handleFileDelete = (type) => {
  switch (type) {
    case 'businessLicense':
      formData.businessLicense = '';
      break;
    case 'idCardFront':
      formData.idCardFront = '';
      break;
    case 'idCardBack':
      formData.idCardBack = '';
      break;
    case 'bankProof':
      formData.bankProof = '';
      break;
  }
};
</script>

<style lang="less" scoped>

.page{
  padding-bottom: 50rpx;
}

div,view{
  box-sizing: border-box;
}
.status {
  width: 100%;
  height: 50rpx;
  padding: 10rpx;
  align-items: center;
  display: flex;
  background: #fff;

  .title {
    font-size: 32rpx;
    font-weight: 700;
  }

  .status_ico {
    width: 50rpx;
    height: 50rpx;
    margin-left: 15rpx;
    margin-right: 15rpx;
    image {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}

.upload_connter {
  padding: 0 0 70rpx 0;
  margin-bottom: 10rpx;
  border-bottom: 1rpx solid rgb(241, 241, 241);
}

.upload-section {
  .upload-title {
    font-size: 14px;
    padding: 20rpx 0;
  }
}

.form-section {
  background: #fff;
  margin-bottom: 0;
  padding: 0 16px;
}

.section-title {
  font-size: 14px;
  color: #333;
  padding: 16px 0;
  font-weight: bold;
}

.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  border-radius: 8rpx;
  padding: 30rpx;
  width: 100%;
  position: relative; // 添加相对定位

  .upload-preview {
    width: 240rpx;
    margin-bottom: 20rpx;
  }

  .delete-btn {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    image {
      width: 24rpx;
      height: 24rpx;
    }
  }
}

.upload-btn {
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

.submit-btn {
  width: 90%;
  height: 44px;
  margin: 50rpx auto;
  background: #2979ff;
  color: #fff;
  border-radius: 22px;
  line-height: 44px;
  text-align: center;
}

.custom-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  border: none;
  width: 500rpx;
  height: 200rpx;

  .upload-icon {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 16rpx;
  }

  .upload-text {
    font-size: 28rpx;
    color: #666;
  }
}
</style>